---
title: Guidelines
redirect_from:
  - /components/airportillustration/
---

import IllustrationList from "../../../../components/IllustrationList";

import IllustrationTypesSnippet from "snippets/illustration-types.mdx";
import IllustrationNonvisualSnippet from "snippets/illustration-nonvisual.mdx";

<ReactExample exampleId="AirportIllustration-default" />

## When to use

- To help travelers know what to expect at airports.
- To provide visual context for specific airports.
- With all essential information in text to be [accessible to everyone](/foundation/accessibility/).

## When not to use

- For general situations not connected to a specific airport---use an [illustration](/components/visuals/illustration/).

## Component status

<ComponentStatus component="AirportIllustration" />

## Content structure

![Image: helps users match instructions with real signage.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:642%3A2202)

## Content

<IllustrationNonvisualSnippet />

<GuidelineImages>

<DoImage>

![A picture with alternative text underneath: Follow all directions for priority security lanes.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:72%3A1)

Use meaningful alt text

</DoImage>

<DontImage>

![A picture with alternative text underneath: A corridor with orange railings surrounding a dark circle with a white arrow underlined by two lines, one white and the other orange.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:72%3A4)

Don't repeat unnecessary information.

</DontImage>

</GuidelineImages>

## Look & feel

### Airport illustration types

<IllustrationTypesSnippet />

### Available illustrations

<IllustrationList airport />
